<template>
    <div class="common-layout">
        <el-container>
            <!-- <el-aside width="200px"> -->
            <!-- <el-aside :width="asideWidth"> -->
            <el-aside>
                <div class="logo_box">
                    <el-icon size="40">
                        <Shop />
                    </el-icon>
                    <span v-show="isShow">商城后台管理系统</span>
                </div>
            </el-aside>
            <el-container>
                <el-header>
                    <el-icon size="45" @click="isShow = !isShow">
                        <!-- <Fold v-if="isShow" />
                        <Expand v-else /> -->
                        <component :is="iconName"></component>
                    </el-icon>
                </el-header>
                <el-main>Main</el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { Shop, Fold, Expand } from "@element-plus/icons-vue"

export default {

    data() {
        return {
            isShow: true,
        }
    },

    computed: {
        asideWidth () {
            return this.isShow ? '200px' : '50px'
        },
        iconName () {
            return this.isShow ? 'Fold' : 'Expand'
        }
    },

    components: {
        Shop,
        Fold,
        Expand
    }
}
</script>

<style lang="scss" scoped>
.common-layout {
    height: 100%;

    .el-container {
        height: 100%;

        .el-aside {
            background-color: rgb(217, 236, 255);
            width: v-bind(asideWidth);

            .logo_box {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .el-header {
            background-color: rgb(198, 226, 255);
            display: flex;
            align-items: center;
        }

        .el-main {
            background-color: rgb(236, 245, 255);
        }
    }
}
</style>
